<template>
	<view class="top" id='topFloat'>
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar radius="100" placeholder="请输入搜索内容" clearButton="none" cancelButton="none"
				@confirm="search" />
		</view>

		<view class="topFloat">
			<view class="float" v-for="(i,idx) in numList" :key="i.userID" @click="clickScroll(`#num${i}`)">
				<view>
					{{i}}
				</view>
			</view>
		</view>

		<view v-for="(item,index) in arr1" :key="index" class="header" :id="`num${item.date}`">
			<view class="text">{{item.date}}</view>
			<view v-for="(it,i) in item.subList" :key="i" class="all">
				<view class="img">
					<image class="prjdetail_titleimage" src="http://106.14.56.171:15016/images/prjdetail/userhead.jpg"
						mode="">
					</image>
				</view>
				<view class="lit">
					<view class="userName">
						<text>
							{{it.userName}}
						</text>
						<text class="text1">
							{{it.department}}
						</text>
					</view>
					<view class="phone">
						<text>{{it.phone}}</text>
					</view>
				</view>
				<view class="uni-list">
					<checkbox-group style="margin-left: 130px;margin-top: 20rpx;"
						@change="e => checkboxChange(e,it,index)">
						<label>
							<checkbox :value="it.userName" :checked="it.checked" style="transform:scale(0.7)" />
						</label>
					</checkbox-group>
				</view>

			</view>
		</view>
		<view class="bottom1">
			<button type="warn" @click="contactsList">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		Desensitized
	} from '../../config/desensitization.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		data() {
			return {
				indexList: [], //列表
				list: [],
				num: 1,
				optionList: {},
				colleagueList: {
					searchValue: "",
					pageNo: 1,
					pageSize: 10,
					searchBeginTime: "",
					searchEndTime: "",
					sortField: "",
					sortOrder: "",
					descStr: "",
					companyId: 0,

				},
				numList: [],
				newList: [], //存储选中的数据
				numOne: [],
				addProjectContacts: [],
				indexNum: 0,
				id: '',
				limitLoad: false, // 防止重复加载
				isHasNextPages: false,

			}
		},
		onLoad(option) {
			// console.log(option);
			this.optionList = JSON.parse(option.arr)
			this.indexNum = option.index
			this.id = option.id
			this.getColleagueList()
		},

		computed: {
			arr1: function() {
				return this.sortKey(this.indexList, 'date')
			},

			...mapState(['userInfo'])
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.colleagueList.pageNo = 1;
			this.getColleagueList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 触底加载
		onReachBottom() {
			if (this.isHasNextPages == true) {
				this.colleagueList.pageNo += 1;
				this.getColleagueList();
				console.log('触底');
			}
		},

		methods: {
			//选中事件
			checkboxChange(e, item, index) {
				if (e.detail.value.length != 0) {
					item.checked = true;
					this.newList[index] = item;
					console.log('this.newList', this.newList);
				} else {
					delete this.newList[index];
				}
			},

			//点确定跳转到详情页
			contactsList() {
				if (this.newList) {
					let arrList = [];
					for (const key in this.newList) {
						console.log(key);
						arrList.push({
							prjCode: this.optionList.prjCode, //项目号
							contactBy: this.newList[key].userName || "", //联系人姓名
							contactType: this.indexNum, //联系人类型 1 委托方 购买方 2 业主方 
							department: this.newList[key].department || "", //所在部门
							contactTel: this.newList[key].phone || "", //联系电话
							corpName: this.optionList.serviceSeller_Zn, //企业名称 取 服务方公司
							prjInfoId: this.optionList.prjInfoId, //项目id
							corpId: this.optionList.serviceSeller, //企业id 取 服务方公司Id

						})
					}
					this.addProjectContacts = arrList
				}
				if (this.newList.length != 0) {
					this.$http.post('api/Project/AddProjectContacts', this.addProjectContacts).then(res => {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					})
				}
			},

			search(e) {
				this.colleagueList.searchValue = e.value
				this.getColleagueList()
			},
			getColleagueList: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				this.numList = []
				this.colleagueList.companyId = this.userInfo.companyId;
				this.$http.post('api/user/GetColleagueList', this.colleagueList).then((res) => {
					this.limitLoad = false
					uni.hideLoading()
					if (this.indexList.length > 0 && this.colleagueList.pageNo != 1) {
						let oldList = []
						this.indexList.forEach((v) => {
							oldList = [...oldList, ...v.subList]
						})
						this.indexList = [...oldList, ...res.items]
					} else {
						this.indexList = res.items
					}

					// if (Array.isArray(this.indexList) && this.indexList.length > 0) {
					// 	this.indexList = this.indexList.map(code => {
					// 		return {
					// 			...code,
					// 			userName: Desensitized.desensitizedName(code.userName)
					// 		}
					// 	})
					// }

					this.isHasNextPages = res.hasNextPages;
					this.mapLoction(this.indexList)
					this.indexList.forEach((item) => {
						this.numList.push(item.date)
					})
					this.numList.sort()
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			//
			mapLoction(data) {
				let arrList = [];
				let arrObj = {};
				console.log(data);
				if (data && Array.isArray(data)) {
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						if (!item.initial && !item.letter) {
							continue;
						}
						let dateStr = item.initial || item.letter;
						if (!arrObj[dateStr]) {
							arrObj[dateStr] = [];
						}
						arrObj[dateStr].push({
							letter: item.initial || item.letter,
							userName: item.userName,
							phone: item.phone,
							department: item.department || '',
							userID: item.userID,
							checked: false,
						});
					}
				}
				console.log(arrObj);
				if (arrObj) {
					for (const arrObjKey in arrObj) {
						arrList.push({
							date: arrObjKey,
							subList: arrObj[arrObjKey],
						})
					}
				}
				this.indexList = arrList
				return arrList;
			},
			//列表排序
			sortKey(array, key) {
				return array.sort(function(a, b) {
					var x = a[key];
					var y = b[key];
					return ((y > x) ? -1 : (x > y) ? 1 : 0) //从小到大排序
				})
			},


			//点击右侧页面滚动到相应的位置上
			clickScroll(code) {
				var codeID = code
				uni.createSelectorQuery().select(codeID).boundingClientRect(data => { //目标节点、也可以是最外层的父级节点
					uni.createSelectorQuery().select("#topFloat").boundingClientRect((res) => { //最外层盒子节点
						uni.pageScrollTo({
							duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
							scrollTop: data.top - (res.top + 120), //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						})
					}).exec()
				}).exec();
			}
		}
	}
</script>

<style lang="less" scoped>
	.top {
		position: relative;
	}

	.header .text {
		margin: 20rpx 0 0 30rpx;
		font-size: 18px;
	}

	.search-bar {
		background-color: #FFFFFF;
		position: sticky;
		top: 0;
		left: 100px;
		z-index: 999;
	}

	.bottom1 {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
		position: sticky;
		text-align: center;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
	}

	.all {
		width: 100%;
		height: 120rpx;
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		padding-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
		padding-left: 20rpx;

	}

	image {
		width: 100rpx;
		height: 100rpx;
	}

	.lit {
		margin: 10rpx 0 0 20rpx;
	}

	.lit .text1 {
		margin: 10rpx 0 0 20rpx;

	}

	.topFloat {
		// position: absolute;
		left: 330px;
		top: 220px;
		position: fixed;

	}

	.float {
		height: 50rpx;
		width: 50rpx;
		border: 1px solid #eee;
		text-align: center;
		line-height: 50rpx;
		background-color: #fff;
		color: #666;

	}

	/deep/.uni-checkbox-wrapper {
		// border-color: #EEEEEE;
		outline: none !important;
	}

	/deep/.uni-checkbox-input {
		border-radius: 41px;
	}

	/deep/.uni-checkbox-input::before {}

	/deep/.uni-checkbox-input-checked {
		border-color: none;
		// background-color: red !important;
	}
</style>